import React, { memo, useState } from 'react';
import { Drawer, Collapse, Input, InputNumber, Popover, Button, Select } from 'antd';
import styles from './index.less';
import {
  ColumnWidthOutlined,
  ColumnHeightOutlined,
} from '@ant-design/icons';
import { connect } from 'react-redux';
import { findNodeById, splitSpace } from '@/utils';
import { composeSpace } from '@/utils/splitSpace';

function WAndH({project: {currentCompId, pageConfig}, saveNodeChange}: any) {
  const currentNode = findNodeById(pageConfig, currentCompId);
  
  const style: React.CSSProperties = currentNode?.style ?? {};
  const {width, height} = style;
  const newWidthParam: {value: any, unit: string} = splitSpace(width);
  const newHeightParam: {value: any, unit: string} = splitSpace(height);
  
  const selectOptions = [
    { label: 'px', value: 'px' },
    { label: '%', value: '%' },
    { label: '适配内容', value: 'auto' }
  ];
  
  const widthContent = (<div className={styles.maxAndMin}>
    <InputNumber placeholder="0" size="small" className={styles.input} min={0} value={style.width}/>
    <span> - </span>
    <InputNumber placeholder="0" size="small" className={styles.input} min={0} value={style.height}/>
    <Button size="small" type="primary" className={styles.maxMinBtn}>确定</Button>
  </div>);

  const heightContent = (<div className={styles.maxAndMin}>
    <InputNumber placeholder="0" size="small" className={styles.input} min={0} value={style.minWidth}/>
    <span> - </span>
    <InputNumber placeholder="0" size="small" className={styles.input} min={0} value={style.minHeight}/>
    <Button size="small" type="primary" className={styles.maxMinBtn}>确定</Button>
  </div>);
  
  /**
   * @description 宽度发生变化
   * @param val 宽度值
   */
  const handleWidthChange = (val: number) => {
    saveNodeChange({
      ...currentNode,
      style: {
        ...style,
        width: composeSpace(val, newWidthParam.unit)
      }
    });
  };
  /**
   * @description 高度发生变化
   * @param val 高度值
   */
  const handleHeightChange = (val: number) => {
    saveNodeChange({
      ...currentNode,
      style: {
        ...style,
        height: composeSpace(val, newHeightParam.unit),
      }
    });
  };
  /**
   * @description 宽度单位发生变化
   * @param val 宽度单位值
   */
  const handleWidthUnitChange = (val: string) => {
    if (val === '%') {
      newWidthParam.value = 100;
    } else if (val === 'px') {
      const selectedDom: any = document.querySelector('.resizeable-box .selected');
      newWidthParam.value = selectedDom.offsetWidth;
    }
    saveNodeChange({
      ...currentNode,
      style: {
        ...style,
        width: composeSpace(newWidthParam.value, val)
      }
    });
  };
  /**
   * @description 高度单位发生变化
   * @param val 高度单位
  */
  const handleHeightUnitChange = (val: string) => {
    if (val === '%') {
      newHeightParam.value = 100;
    } else if (val === 'px') {
      const selectedDom: any = document.querySelector('.resizeable-box .selected');
      newHeightParam.value = selectedDom.offsetHeight;
    }
    saveNodeChange({
      ...currentNode,
      style: {
        ...style,
        height: composeSpace(newHeightParam.value, val)
      }
    });
  };

  return (
    <ul className={styles.wAndH}>
      <li>
        <label>宽度</label>
        <div className={styles.inputBox}>
          <InputNumber
            placeholder="0"
            size="small"
            className={styles.input}
            min={0}
            max={newWidthParam.unit === '%' ? 100 : Number.MAX_SAFE_INTEGER}
            onChange={handleWidthChange}
            value={newWidthParam.value}
            disabled={newWidthParam.unit === 'auto'}
          />
          <Select
            options={selectOptions}
            size="small"
            className={styles.select}
            defaultValue="px"
            value={newWidthParam.unit}
            onChange={handleWidthUnitChange}
          ></Select>
        </div>
        <Popover placement="bottomRight" title="设置最大和最小宽度" content={widthContent}>
          <ColumnWidthOutlined className={styles.icon} />
        </Popover>
      </li>
      <li>
        <label>高度</label>
        <div className={styles.inputBox}>
          <InputNumber
            placeholder="0"
            size="small"
            className={styles.input}
            min={0}
            max={newHeightParam.unit === '%' ? 100 : Number.MAX_SAFE_INTEGER}
            onChange={handleHeightChange}
            value={newHeightParam.value}
            disabled={newHeightParam.unit === 'auto'}
          />
          <Select
            options={selectOptions}
            size="small"
            className={styles.select}
            defaultValue="px"
            value={newHeightParam.unit}
            onChange={handleHeightUnitChange}
          ></Select>
        </div>
        <Popover placement="bottomRight" title="设置最大和最小高度" content={heightContent}>
          <ColumnHeightOutlined className={styles.icon} />
        </Popover>
      </li>
    </ul>
  );
}

export default connect(
  ({ project }: any) => ({ project }),
  {
    saveNodeChange: (payload: { code: string }) => ({ type: 'project/saveNodeChange', payload })
  }
)(memo(WAndH));